<template>
  <div class="RightBar-box">
    <div class="select-box">
      <div class="startbox">
        <span class="demonstration">县级公司:</span>
        <el-select v-model="maintenanceUnit" placeholder="请选择" clearable @change="xgsChange" filterable>
          <el-option
            v-for="item in  maintenanceUnitList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="chart-box">
      <v-chart class="chart-bar" :options="newOption" :auto-resize="true" />
    </div>
    <!-- <div>{{filterbarData}}</div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import _ from "lodash";
@Component
export default class RightBar extends Vue {
  @Prop() formData!: any;
  maintenanceUnitList: Array<object> = [
    // {
    //   value: "1",
    //   label: "长清供电公司",
    // },
  ];
  maintenanceUnit: string = "";
  option: EChartOption = {
    grid: {
      top: 50,
      left: "32",
      bottom: "15",
      right: "39",
      containLabel: true,
    },
    legend: {
      show: true,
      top: 15,
      right: 26,
      data: ["检修", "故障", "遥控", "紧急解锁", "倒闸操作"],
      textStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    xAxis: [
      {
        type: "category",
        data: [
          "国网济南供电公司",
          "长清供电公司",
          "国网济南供电公司",
          "国网济南供电公司",
          "国网济南供电公司",
        ],
        // data: this.filterbarData.axisData,
        axisLine: {
          lineStyle: {
            color: "#777",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#C6CEE2",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "white",
          formatter: "{value}",
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#777",
          },
        },
      },
    ],
    series: [
      {
        name: "检修",
        type: "bar",
        barWidth: "14",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#0390FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0A51BB", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: [20, 30, 50, 10, 40],
        // data: this.filterbarData.seriesContent,
      },
      {
        name: "故障",
        type: "bar",
        barWidth: "14",
        barGap: "0",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#2FD48B", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0F8853", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: [5, 50, 70, 80, 10],
        // data: this.filterbarData.seriesContent1,
      },
      {
        name: "遥控",
        type: "bar",
        barWidth: "14",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#F44E4E", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#B82F2F", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: [10, 20, 30, 10, 40],
        // data: this.filterbarData.seriesContent2,
      },
      {
        name: "紧急解锁",
        type: "bar",
        barWidth: "14",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#EB9549", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#C96F1F", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: [10, 20, 30, 10, 40],
        // data: this.filterbarData.seriesContent3,
      },
      {
        name: "倒闸操作",
        type: "bar",
        barWidth: "14",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#D7DCE8", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#80838A", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: [10, 20, 30, 10, 40],
        // data: this.filterbarData.seriesContent4,
      },
    ],
  };
  // 接口返回的折线图数据 自己先造一下
  barData = [
    // {
    //   count: 362139,
    //   reasonCode: "2",
    //   reason: "检修",
    //   maintenanceUnitCode: "8a1ea5c64bdebad1014bdebc6047087b",
    //   maintenanceUnitName: "国网山东省电力公司检修公司",
    // },
    // {
    //   count: 510260,
    //   reasonCode: "1",
    //   reason: "故障",
    //   maintenanceUnitCode: "8a1ea5c64bdebad1014bdebc6047087b",
    //   maintenanceUnitName: "国网山东省电力公司检修公司",
    // },
    // {
    //   count: 1218061,
    //   reasonCode: "5",
    //   reason: "遥控",
    //   maintenanceUnitCode: "8a1ea5c64bdebad1014bdebc6047087b",
    //   maintenanceUnitName: "国网山东省电力公司检修公司",
    // },
    // {
    //   count: 90533,
    //   reasonCode: "3",
    //   reason: "紧急解锁",
    //   maintenanceUnitCode: "8a1ea5c64bdebad1014bdebc6047087b",
    //   maintenanceUnitName: "国网山东省电力公司检修公司",
    // },
    // {
    //   count: 16460,
    //   reasonCode: "4",
    //   reason: "倒闸操作",
    //   maintenanceUnitCode: "8a1ea5c64bdebad1014bdebc6047087b",
    //   maintenanceUnitName: "国网山东省电力公司检修公司",
    // },
  ];

  // 处理成柱图所需数据
  get newOption() {
    let option = this.option;
    let barData = this.barData || [];
    let barObj = {};
    barData.forEach((item) => {
      barObj[item.maintenanceUnitName] = barObj[item.maintenanceUnitName] || {
        检修: 0,
        故障: 0,
        遥控: 0,
        紧急解锁: 0,
        倒闸操作: 0,
      };
      if (item.reason === "检修") {
        barObj[item.maintenanceUnitName].检修 += item.count;
      }
      if (item.reason === "故障") {
        barObj[item.maintenanceUnitName].故障 += item.count;
      }
      if (item.reason === "遥控") {
        barObj[item.maintenanceUnitName].遥控 += item.count;
      }
      if (item.reason === "紧急解锁") {
        barObj[item.maintenanceUnitName].紧急解锁 += item.count;
      }
      if (item.reason === "倒闸操作") {
        barObj[item.maintenanceUnitName].倒闸操作 += item.count;
      }
    });
    // console.log(111, barObj);
    var axisData = [];
    var seriesContent = [];
    var seriesContent1 = [];
    var seriesContent2 = [];
    var seriesContent3 = [];
    var seriesContent4 = [];

    for (let key in barObj) {
      axisData.push(key);
      seriesContent.push(barObj[key].检修);
      seriesContent1.push(barObj[key].故障);
      seriesContent2.push(barObj[key].遥控);
      seriesContent3.push(barObj[key].紧急解锁);
      seriesContent4.push(barObj[key].倒闸操作);
    }

    option.xAxis[0].data = axisData;
    option.series[0].data = seriesContent;
    option.series[1].data = seriesContent1;
    option.series[2].data = seriesContent2;
    option.series[3].data = seriesContent3;
    option.series[4].data = seriesContent4;

    return option;
  }

  mounted() {
    this.getMaintenanceUnit();
    this.getReasonTypeStatistics()
  }
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }

  // 获取当前地市下县公司
  getMaintenanceUnit() {
    var localCity = "";
    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    var params = {
      localCity: localCity,
    };
    (this as any).$services
      .getMaintenanceUnit({ data: params })
      .then((result: any) => {
        if (result.data) {
          var data = [];
          result.data.map((k) => {
            data.push({
              value: k.code,
              label: k.name,
            });
          });
          this.maintenanceUnitList = data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 获取县公司钥匙信息，并按解锁原因分类展示
  getReasonTypeStatistics() {
    var localCity = "";
    // if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
    //   localCity = this.CompanyList[0].code;
    // } else {
    //   localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    // }
      localCity = this.maintenanceUnit;

    var params = {
      localCity: localCity,
      voltageLevel: this.formData.voltageLevel,
      keyFirm: this.formData.keyFirm,
      reasonCode: this.formData.reasonCode,
      maintenanceUnit: this.maintenanceUnit,
    };
    (this as any).$services
      .getReasonTypeStatistics({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.barData = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  xgsChange(val){
    console.log(val);
    console.log(this.maintenanceUnit);
    
    this.getReasonTypeStatistics()
    
  }
}
</script>

<style lang="scss" scoped>
.RightBar-box {
  width: 100%;
  height: 100%;
  .select-box {
    height: 0.3rem;
    margin-top: 0.32rem;
    margin-left: 0.19rem;
    > div {
      > span {
        padding-right: 0.1rem;
      }
    }
  }
  .chart-box {
    width: 100%;
    height: calc(100% - 0.62rem);
    .chart-bar {
      width: 100%;
      height: 100%;
    }
  }
}
</style>